<template>
  <div>
    <a-comment :author="userName" :datetime="time" align="center">
      <template #actions>
      <span class="action" key="heart" @click="onLikeChange">
        <span v-if="like">
          <IconHeartFill size="20" :style="{ color: '#f53f3f' }"/>
        </span>
        <span v-else>
          <IconHeart size="20"/>
        </span>
        <span style="font-size: 16px">喜欢</span>
      </span>
        <span class="action" key="star" @click="onStarChange" style="margin: 0 10px;">
        <span v-if="star">
          <IconStarFill size="20" style="{ color: '#ffb400' }"/>
        </span>
        <span v-else>
          <IconStar size="20"/>
        </span>
    <span>收藏{{ collect }}</span>
      </span>
        <span class="action" key="reply">
        <IconMessage size="20"/> 分享Reply
      </span>
      </template>
      <template #avatar>
        <a-avatar>
          <img
              alt="avatar"
              :src="imgsrc"
          />
        </a-avatar>
      </template>
      <template #content>
        <div style="margin-bottom: 20px;">
          <h2> {{ discuss }}</h2>
        </div>
      </template>
    </a-comment>
  </div>
</template>

<script setup>
import {ref} from "vue"

const like = ref(false);
const star = ref(false);
/**
 *
 * @type imgsrc:头像，
 * @type userName:用户名，
 * @type discuss:评论，
 * @type like:喜欢，
 * @type collect:收藏，
 * @type time:时间，
 */
const props = defineProps(['imgsrc', 'userName', 'discuss', 'like', 'collect', 'time'])


const onLikeChange = () => {
  like.value = !like.value;
};
const onStarChange = () => {
  star.value = !star.value;
};
</script>

<style scoped>

</style>